{layout name="layout"}
<!-- <link  href="__PLU__/magic-check/css/magic-check.min.css" rel="stylesheet"> -->
<link  href="__PLU__/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
<script src="__PLU__/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- 背景图 -->
<div id="bg-overlay" class="bg-img" style="background-image: url('__IMG__/bg-img-3.jpg');"></div>
<div class="cls-content">
    <div class="cls-content-sm panel">
        <div class="panel-body">
            <div class="mar-ver pad-btm text-center">
                <h3 class="h4 mar-no">YYadmin登录</h3>
                <p class="text-muted">xxx</p>
            </div>
            <form id="login-form" role="form">
                <div class="form-group">
                    <input type="text" class="form-control" name="login[username]" placeholder="用户名" autofocus>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="login[password]" placeholder="密码">
                </div>
                <div class="form-group col-sm-6" style="padding-left: 0;">
                    <input type="text" class="form-control" name="login[checkcode]" placeholder="验证码" autofocus>
                </div>
                <div class="col-sm-6">
                    <img src="{:captcha_src()}" id="captcha_img" onclick="this.src='{:captcha_src()}'" title="看不清？点击重置" alt="captcha">
                </div>
                
                <!-- <div class="checkbox pad-btm text-left">
                    <input id="demo-form-checkbox" class="magic-checkbox" type="checkbox">
                    <label for="demo-form-checkbox">七日内免登陆</label>
                </div> -->
                <button class="btn btn-primary btn-lg btn-block" form="login-form" type="button">登录</button>
            </form>
        </div>
        <div class="pad-all text-lg-right">
            <a href="#" class="btn-link mar-rgt">忘记密码 ?</a>
            <a href="#" class="btn-link mar-lft">创建账户</a>
            <div class="media pad-top bord-top">
                <div class="pull-right">
                    <a href="#" class="pad-rgt"><img src="__IMG__/qq.png" width="30" height="30"></a>
                    <a href="#" class="pad-rgt"><img src="__IMG__/weixin.png" width="30" height="30"></a>
                    <a href="#" class="pad-rgt"><img src="__IMG__/weibo.png" width="30" height="30"></a>
                </div>
                <div class="media-body text-left">
                    其他方式登录
                </div>
            </div>
        </div>  
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#login-form').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon',
                invalid: 'glyphicon',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                'login[username]': {
                    validators: {
                        notEmpty: {
                            message: '请输入用户名'
                        }
                    }
                },
                'login[password]': {
                    validators: {
                        notEmpty: {
                            message: '请输入密码',
                        }
                    }
                },
                'login[checkcode]': {
                    validators: {
                        notEmpty: {
                            message: '请输入验证码',
                        }
                    }
                },
            }
        });
    });
    $('button[form="login-form"]').on('click',function(){
        $('#login-form').data('bootstrapValidator').validate();  
        if(!$('#login-form').data('bootstrapValidator').isValid()){
            return false;
        }
        $.ajax({
            url:"/checklogin.html",
            type:"post",
            data:$('#login-form').serialize(),
            dataType:"json",
            success:function(result){
                if(result.status == 'success'){
                    window.location.reload();
                }else{
                    $.niftyNoty({
                        type: 'warning',
                        icon : 'pli-exclamation icon-2x',
                        message : result.msg,
                        container : 'floating',
                        timer : 1500,
                    });
                    $('#captcha_img').click();
                }
            },
            error:function(){
                $.niftyNoty({
                    type: 'danger',
                    icon : 'pli-exclamation icon-2x',
                    message : '网络连接失败',
                    container : 'floating',
                    timer : 1500,
                });
            }
        });
    });

</script>